<template>
  <div class='app-container'>
    <el-card>
      <!-- 表单 -->
      <el-form  ref="parameters" :model="parameters" label-width="80px"
        size="small"
        :inline="true">
        <div>
          <el-row>
            <el-col>
              <el-form-item label="学科名称" prop="subjectName">
                <el-input
                  v-model="subjectName"
                  @keyup.enter="hSearch">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="hRemove">
                  清除
                </el-button>
                <el-button type="primary" size="small" @click="hSearch">
                  搜索
                </el-button>
              </el-form-item>
              <el-form-item class="filter-item fr">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="hDialog('add')"
                  >新增学科
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <!-- 数据记录 -->
      <!-- :closable="false" 不可关闭 -->
      <el-alert
        :title="alertText"
        class="alert"
        :closable="false"
        show-icon>
      </el-alert>

      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="tableData"
        style="width: 100%">
        <!-- 序号 -->
        <el-table-column
          width="50"
          label="序号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <!-- 学科名称 -->
        <el-table-column
          width="100"
          label="学科名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.subjectName}}</span>
          </template>
        </el-table-column>
        <!-- 创建者 -->
        <el-table-column
          label="创建者">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <!-- 创建日期 -->
        <el-table-column
          prop="addDate"
          width="220"
          label="创建日期"
          :formatter="dataFormat">
          <!-- <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addDate }}</span>
          </template> -->
        </el-table-column>
        <!-- 前台是否显示 -->
        <el-table-column
          label="前台是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <!-- 二级目录 -->
        <el-table-column
          label="二级目录">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.twoLevelDirectory }}</span>
          </template>
        </el-table-column>
        <!-- 标签 -->
        <el-table-column
          label="标签">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tags }}</span>
          </template>
        </el-table-column>
        <!-- 题目数量 -->
        <el-table-column
          label="题目数量">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.totals }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="hClassify(scope.row.id,scope.row.subjectName)">学科分类
            </el-button>
            <el-button
              type="text"
              @click="hTabs(scope.row.id,scope.row.subjectName)">学科标签
            </el-button>
              <el-button
              type="text"
              @click="hDialog(scope.row.id)">修改
            </el-button>
            <el-button
              type="text"
              @click="hDelete(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--:total总页数,
      :current-page当前页,
      :page-size每页显示个数
      :page-sizes每页显示个数选择器的配置,
      popper-class每页显示个数选择器的下拉框默认值
      size-change监听每页数据
      current-change监听换到哪一页-->
      <el-pagination
        background
        layout="prev,pager,next,sizes,jumper"
        :total="total_count"
        :current-page="Number(parameters.page)"
        :page-size="Number(parameters.pagesize)"
        :page-sizes="[5,10,20,50]"
        @size-change='hPagesize'
        @current-change="hCurrent"
        style="float:right;margin:10px 0">
      </el-pagination>
      <!-- 点击新增弹出对话框 -->
      <my-dialog
        ref="editUser"
        :formBase="formData"
        :titleInfo="titleInfo"
        v-on:newDates="loadSubjects"
        :parameter="parameters">
      </my-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/subjects.js'
import MyDialog from '@/module-hmmm/components/subjects-add.vue'
// 时间格式引入
import moment from 'moment'
export default {
  name: 'subjects',
  components: {
    MyDialog
  },
  data () {
    return {
      subjectName: '', // 学科名称
      tableData: [], // 获取数据放的值
      parameters: {
        page: 1, // 页码
        pagesize: 10 // 一页几条数据
      },
      alertText: '', // 数据列表总共多少数据
      total_count: 0, // 总页数
      listLoading: true, // 加载状态
      formData: {
        subjectName: ' ', // 学科名称
        isFrontDisplay: 1
      },
      titleInfo: {
        pageTitle: '学科', // 标题后俩字
        text: '' // 标题前俩字
      }
    }
  },
  created () {
    // 请求页面数据
    this.loadSubjects()

    var _this = this
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.hSearch(this.parameters)
      }
    }
  },
  methods: {
    // 获取数据列表
    async loadSubjects () {
      this.listLoading = true
      this.parameters.subjectName = this.subjectName
      try {
        const { data: res } = await list(this.parameters)
        console.log(res)
        // 获取的数据传给这个空数组
        this.tableData = res.items
        // 总条数
        this.total_count = res.counts
        // 把总条数传给数据列的alertText上
        this.alertText = `共 ${this.total_count} 条数据`
        this.listLoading = false
      } catch (err) {
        console.log(err)
        this.listLoading = false
      }
    },
    // 点击进入下一页
    hCurrent (curPage) {
      this.parameters.page = curPage
      // 重新请求
      this.loadSubjects()
    },
    // 每多少页显示的条数
    hPagesize (curPage) {
      console.log(curPage)
      this.parameters.pagesize = curPage
      this.parameters.page = 1
      this.parameters.page === 1 && this.loadSubjects()
    },
    // 搜索
    hSearch () {
      // 页码重置为第一页
      this.parameters.page = 1
      // 重新获取页面
      this.loadSubjects()
    },
    // 清除
    hRemove () {
      // element-ui给的表单重置功能resetFields
      this.$refs.parameters.resetFields()
      this.subjectName = null
    },
    // ****************************
    query () {
      this.formData = {}
    },
    // 点击新增用户,编辑用户
    hDialog (id) {
      this.query()
      this.$refs.editUser.dialogFormV()
      if (id === 'add') {
        this.titleInfo.text = '新增' // 给弹层传参
      } else {
        this.titleInfo.text = '修改' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },
    // 编辑
    // 表单详情数据加载
    async hanldeEditForm (objeditId) {
      try {
        this.formData.id = objeditId
        const { data: res } = await detail({ id: objeditId })
        // 获取详情 给formData
        this.formData = res
      } catch (err) {
        console.log(err)
      }
    },
    // 获取删除id
    async doDelete (id) {
      try {
        await remove({ id })
        console.log(id)
        this.$message.success('成功删除了用户' + '!')
        this.tableData.splice(id, 1)
        this.loadSubjects()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    // 删除
    hDelete (id) {
      // 提示用户
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        this.doDelete(id)
      }
      ).catch(() => {
        this.$message.info('已取消操作!')
      })
    },
    // 点击学科分类跳转
    hClassify (id, name) {
      this.$router.push(`directorys?id=${id}&name=${name}`)
    },
    // 点击学科标签跳转
    hTabs (id, name) {
      this.$router.push(`tags?id=${id}&name=${name}`)
    },
    // 表格时间格式化
    dataFormat (row, column) {
      console.log(123)
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.alert {
  margin: 10px 0;
}
</style>
